<script lang="ts" setup>
import type { DataType } from './types';

import type { VxeGridProps } from '#/adapter/vxe-table';

import { Page, useVbenModal } from '@vben/common-ui';
import { cloneDeep } from '@vben/utils';

import { Button, message, Popconfirm, Space } from 'ant-design-vue';

import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { deleteGuestbooks, getGuestbooks } from '#/api/plugin/guestbook';
import Icon from '#/components/Icons';

import {
  FormModalView,
  TableMessgesModalView,
  TableModalView,
} from './components';

defineOptions({
  name: 'PortalAdminCategory',
});
const router = useRouter();
const routeMeta = router.currentRoute.value.meta;
const viewTitle = routeMeta.title.replace('管理', '');
const deptList = ref();

const gridOptions: VxeGridProps<DataType> = {
  rowConfig: {
    useKey: true,
    isCurrent: true,
    isHover: true,
  },
  columnConfig: {
    useKey: true,
  },
  columns: [
    { field: 'id', title: '编号', align: 'left', width: 80 },
    { field: 'name', title: '名称' },
    { field: 'messagesCount', title: '留言数量' },
    { field: 'messagesExamineCount', title: '审核数量' },
    { field: 'messagesUnauditedCount', title: '未审核数量' },
    {
      slots: { default: 'action' },
      field: 'action',
      fixed: 'right',
      title: '操作',
      width: 240,
    },
  ],
  height: 'auto',
  keepSource: true,
  proxyConfig: {
    ajax: {
      query: async () => {
        const { data } = await getGuestbooks();
        return data;
      },
    },
  },
  toolbarConfig: {
    custom: true,
    // export: true,
    // import: true,
    refresh: true,
    zoom: true,
  },
};

const [Grid, GridApi] = useVbenVxeGrid({
  gridOptions,
});

const handleDelete = async (row: DataType) => {
  const $table = GridApi.grid;
  if ($table) {
    const { msg } = await deleteGuestbooks({ ids: row.id });
    GridApi.query();
    message.success(msg);
  }
};

const [FormModal, formModalApi] = useVbenModal({
  // 连接抽离的组件
  connectedComponent: FormModalView,
  onClosed() {
    const formModalData = formModalApi.getData();
    if (formModalData?.isUpdata) {
      GridApi.query();
    }
  },
});

const openDialog = async (title: '新增' | '编辑', row?: DataType | null) => {
  const form: any = cloneDeep(row);

  formModalApi.setState({
    title: `${title}${viewTitle}`,
  });
  formModalApi.setData({ form, dept_list: deptList.value });
  formModalApi.open();
};

const [TableModal, tableModalApi] = useVbenModal({
  // 连接抽离的组件
  connectedComponent: TableModalView,
});

const [TableMessgesModal, TableMessgesModalApi] = useVbenModal({
  // 连接抽离的组件
  connectedComponent: TableMessgesModalView,
  onClosed() {
    const formModalData = TableMessgesModalApi.getData();
    if (formModalData?.isUpdata) {
      GridApi.query();
    }
  },
});

const openMoreDialog = (title: '字段管理' | '留言管理') => {
  const currentRecord = GridApi.grid.getCurrentRecord();
  if (!currentRecord) {
    message.error('未选择任何行！');
    return;
  }
  if (title === '字段管理') {
    tableModalApi.setState({
      title: `${currentRecord?.name}--${viewTitle}${title}`,
    });

    tableModalApi.setData(currentRecord);
    tableModalApi.open();
  } else {
    TableMessgesModalApi.setState({
      title: `${currentRecord?.name}--${viewTitle}${title}`,
    });
    TableMessgesModalApi.setData(currentRecord);

    TableMessgesModalApi.open();
  }
};
</script>

<template>
  <Page auto-content-height>
    <FormModal />
    <TableModal />
    <TableMessgesModal />
    <Grid :table-title="`${viewTitle}列表`">
      <template #toolbar-tools>
        <Button class="mr-2" type="primary" @click="openDialog('新增')">
          <span class="anticon">
            <Icon icon="ri:add-line" />
          </span>
          新增{{ viewTitle }}
        </Button>
        <Button class="mr-2" type="primary" @click="openMoreDialog('留言管理')">
          <span class="anticon">
            <Icon icon="ri:menu-2-line" />
          </span>
          留言管理
        </Button>
        <Button class="mr-2" type="primary" @click="openMoreDialog('字段管理')">
          <span class="anticon">
            <Icon icon="ri:menu-2-line" />
          </span>
          字段管理
        </Button>
      </template>

      <template #action="{ row }">
        <Space>
          <Button
            :disabled="row.is_system === 1"
            type="primary"
            @click="openDialog('编辑', row)"
          >
            <template #icon>
              <span class="anticon">
                <Icon icon="ri:file-edit-line" />
              </span>
            </template>
            编辑
          </Button>
          <Popconfirm
            :disabled="row.is_system === 1"
            cancel-text="否"
            ok-text="是"
            title="确认删除？"
            @confirm="handleDelete(row)"
          >
            <Button :disabled="row.is_system === 1" danger type="primary">
              <template #icon>
                <span class="anticon">
                  <Icon icon="ri:delete-bin-line" />
                </span>
              </template>
              删除
            </Button>
          </Popconfirm>
        </Space>
      </template>
    </Grid>
  </Page>
</template>
